<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        ul li{
            list-style:none;
            float:left;
        }
        a{
            height:35px;
            line-height: 35px;
            text-decoration:none;
            background:url("file/复杂滑动门/bg_r1_c1.png") no-repeat;
            display:inline-block;
            padding-left:7px;
        }
        span{
            height:35px;
            background:url("file/复杂滑动门/bg_r1_c2.png") repeat-x right;
            display:inline-block;
            padding-right:30px;
        }
        a:hover{
            background:url("file/复杂滑动门/blue_r1_c1.png") no-repeat;
        }
        a:hover span{
            background:url("file/复杂滑动门/blue_r1_c2.png") repeat-x right;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#"><span>复杂滑动门</span></a></li>
        <li><a href="#"><span>复杂滑动门</span></a></li>
    </ul>
</body>
</html>